

import React from 'react'
import "./index.css"
export default function Footer({ todoList, setTodoList }) {

  // console.log(todoList);
  // console.log(setTodoList);

  //以完成 累加
  const complete = () => {
    return todoList.reduce((p, c) => {
      if (c.done) {
        return p + 1
      } else {
        return p
      }
    }, 0)
  }

  // console.log(complete());
  // console.log(todoList.length);

  //全选
  //确定当前全选框的状态
  //遍历所有担心框
  //把全选框状态同步给单选框
  const allChoice = (e) => {
    //JS合成事件
    // console.log(e);
    //当前触发事件的DOM
    // console.log(e.target);
    //当前全选框的状态
    // console.log(e.target.checked);
    const expCheck = e.target.checked
    const newAll = todoList.map(item => {
      //将遍历的所有item展开 并 把每一个item的done属性值修改为expCheck的值
      return { ...item, done: expCheck }
    })

    setTodoList(newAll)
  }
  //删除所有数据
  const deleteAll = () => {
    // console.log(11);
    const newAll = todoList.filter(item =>!item.done)
    // console.log(newAll);
    setTodoList(newAll)
  }


  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" onChange={allChoice} checked={complete() === todoList.length && todoList.length !== 0} />
      </label>
      <span>
        <span>已完成{complete()}</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger" onClick={deleteAll}>清除已完成任务</button>
    </div>
  )
}
